<template>
  <div id="app">


    <el-form label-width="120px" style="margin-top: 20px" :inline="true">

      <div style="margin-left:40px;margin-bottom: 10px" >
        <el-button type="primary" icon="el-icon-search" @click="searchDispatch">搜索</el-button>
        <el-button>重置</el-button>
      </div>

      <el-form-item label="派车单号：">
        <el-input placeholder="请输入派车单号"
        v-model="dOrderId"
        ></el-input>
      </el-form-item>

    </el-form>

    <el-divider></el-divider>
    <div style="margin-left:40px">
      <el-button type="success"  icon="el-icon-refresh" @click="refresh">刷新</el-button>
    </div>


    <el-table
      :data="dispatchs"
      ref="arr"
      tooltip-effect="dark"
      style="width: 100%;margin-left: 40px"
      @selection-change="">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="dOrderId"
        label="派车单号">
      </el-table-column>

      <el-table-column
        prop="transport.need.route"
        label="路线 "
        width="200px"
      >
      </el-table-column>

      <el-table-column
        prop="transport.need.cName"
        label="客户名称" >
      </el-table-column>

      <el-table-column
        prop="transport.need.cTime"
        label="创建时间"
        format='yyyy-MM-dd-HH-mm-ss'>
      </el-table-column>

      <el-table-column
        prop="transport.need.gNumber"
        label="总数量(个)">
      </el-table-column>

      <el-table-column
        prop="transport.need.gWeight"
        label="总重量(千克)">
      </el-table-column>

      <el-table-column
        prop="transport.need.gVolume"
        label="总体积(方)">
      </el-table-column>

      <el-table-column
        prop="dStatus"
        label="是否处理">

        <template slot-scope="scope">
          <el-tag :type="scope.row.dStatus === 0 ? 'success' : 'primary'"
          >{{scope.row.dStatus === 0 ? '未处理' : '已处理'}}</el-tag>
        </template>

      </el-table-column>

      <el-table-column
        prop="operate"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="manage(scope.$index)" type="danger" size="small">处理</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage:1,
        pageSizes:[2,4,6],
        pageSize:2,
        total:0,
        dispatchs:[],
        dOrderId:'',
      }
    },
    methods: {
      //refresh
      refresh(){
        this.findDispatchs(1,2);
      },
      searchDispatch(){
        this.findDispatchs(this.currentPage,this.pageSize,this.dOrderId);
      },
      manage(index){
        let dispatch = this.dispatchs[index]
        console.log(dispatch)

        this.$http.post('http://localhost/dispatch/manage',dispatch)
          .then(resp=>{
            if (resp.data.code === 100000){
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.findDispatchs(1,2);
            }else{
              this.$message({
                message: '提交失败',
                type: 'error'
              });
            }
          })
      },
      findDispatchs(currentPage,pageSize,dOrderId){
        console.log(dOrderId)
        this.$http({
          method:"GET",
          url:"http://localhost/dispatch/page",
          params:{
            currentPage:currentPage,
            pageSize:pageSize,
            dOrderId:dOrderId
          }
        }).then(resp=>{
          console.log(resp.data);
          this.dispatchs = resp.data.data.list;
          this.total = resp.data.data.total;
        })
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.findDispatchs(this.currentPage,this.pageSize);
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.findDispatchs(this.currentPage,this.pageSize);
      }
    },
    created() {
      this.findDispatchs(1,2);
    },
  }
</script>

<style scoped>

  .el-divider {
    margin: 8px 0;
    background: 0 0;
    border-top: 10px solid #E6EBF5;
  }

  .div1{
    margin-left:40px;
    border-bottom: 1px;
  }

</style>
